
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="swiper.min.css">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="animate.min.css">
    <link rel="stylesheet" type="text/css" href="iconfont.css"/>
  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }
    .swiper-wrapper{
        transform: translate3d(0px, -1472px, 0px);
        transition-duration: 0ms;
        box-direction: normal;
    }
    .swiper-slide {
      display: flex;
      position: relative;
      transform-style:preserve-3d;
    }
    .swiper-slide img{
        position: absolute;
    }
  </style>
</head>
<body>
  <!-- Swiper -->
    <audio autoplay loop>
        <source src="img/1.mp3"></source>
    </audio>
  <div class="swiper-container">

    <div class="swiper-wrapper">
        <!-- 1 -->
        <div class="swiper-slide b1">
            <img src="img/1-2.png" alt=""  class="ani  img1" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s" swiper-animate-delay=".2s">
            <img src="img/1-1.png" alt=""  class="ani  img2" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="1.2s">
            <img src="img/1-3.png" alt=""  class="ani  img3" swiper-animate-effect="rotateOute" swiper-animate-duration="30s" swiper-animate-delay="2s">
            <img src="img/arrow.png" alt="" class="top">
        </div>
        <!-- 2 -->
        <div class="swiper-slide b2">
            <img src="img/2-1.png" alt="" class="ani img4"  swiper-animate-effect="fadeInDownBig" swiper-animate-duration=".5s" swiper-animate-delay=".2s">
            <img src="img/2-2.png" alt="" class="ani img5"  swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s" swiper-animate-delay=".3s">
            <div class="ani" wiper-animate-effect="fadeInUp" swiper-animate-duration=".5s" swiper-animate-delay="2s" style="width: 100%;height: 100%;">
                <div class="ani div1 iconfont icon-liubianxing" style="font-size: 2rem; color:#ffc914;"></div>
                <div class="ani div2 iconfont icon-liubianxing" style="font-size: 2rem; color:#ff856e;"></div>
                <div class="ani div3 iconfont icon-liubianxing" style="font-size: 2rem; color:#928dcb;"></div>
                <div class="ani div4 iconfont icon-liubianxing" style="font-size: 2rem; color:#22beff;"></div>
                <div class="ani div5 iconfont icon-liubianxing" style="font-size: 2rem; color:#244569;"></div>
            </div>
            <img src="img/arrow.png" alt="" class="top">
        </div>
        <!-- 3 -->
        <div class="swiper-slide b3">
            <img src="img/page3.jpg" alt="" class="img6">
            <img src="img/arrow.png" alt="" class="top">
        </div>
        <!-- 4 -->
        <div class="swiper-slide b4">
            <p class="ani p1" style="position:absolute;z-index:9;" swiper-animate-effect="fadeInDownBig" swiper-animate-duration=".5s" swiper-animate-delay=".2s" >产学研创高教育模式</p>
            <img src="img/page4i.png" alt="" class="ani img7" swiper-animate-effect="rubberBand" swiper-animate-duration=".5s" swiper-animate-delay="1s">
            <img src="img/arrow.png" alt="" class=" top">
        </div>
        <!-- 5 -->
        <div class="swiper-slide b5">
            <img src="img/page5i.png" alt="" class="ani img8" swiper-animate-effect="flip" swiper-animate-duration="0.8s" swiper-animate-delay=".2s">
            <p class="ani p2" swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s" swiper-animate-delay=".6s">博看文思打的客户遍布全球，研发项目涉及电子商<br>务、IT服务、P2P、SNS、大数据、智能硬件、可<br>穿设备、云计算等隔行各业，博看文思自助研发<br>
                的APP产品被多次评为"精品应用"。博看文思的<br>项目成果不仅极大地满足了客户的需求，并且强有<br>力地推动了移动互联网行业的发展</p>

                <img src="img/arrow.png" alt="" class="top">
        </div>
        <!-- 6 -->
        <div class="swiper-slide b5">
            <img src="img/page6i.png" alt="" class="ani img8" swiper-animate-effect="flip" swiper-animate-duration="0.8s" swiper-animate-delay=".2s">
            <p class="ani p2" swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s" swiper-animate-delay=".6s">博看文思团队由中、美300余位专家组成，拥有国内先进<br>的自主知识产权的游戏物理引擎、3D引擎和手机跨平台开<br>发框架，与包括世界500强在内的多家企业进行项目外<br>包、技术解决方案等综合服务</p>
            
            <img src="img/arrow.png" alt="" class="top">
        </div>
        <!-- 7 -->
        <div class="swiper-slide b5">
            <img src="img/page7i.png" alt="" class="ani img8" swiper-animate-effect="flip" swiper-animate-duration="0.8s" swiper-animate-delay=".2s">
            <p class="ani p2" swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s" swiper-animate-delay=".6s">博看文学注重移动互联网高端人才培养，课程涵盖了<br>IOS、HTML5和Android应用领域，先后在北京、广州、<br>厦门、西安等地建立实训中心，累计为企业输送6万名<br>高级移动开发人才</p>
            <img src="img/arrow.png" alt="" class="top">
        </div>
        <!-- 8 -->
        <div class="swiper-slide b5">
            <img src="img/page8i.png" alt="" class="ani img8" swiper-animate-effect="flip" swiper-animate-duration="0.8s" swiper-animate-delay=".2s">
            <p class="ani p2" swiper-animate-effect="fadeInUp" swiper-animate-duration=".5s" swiper-animate-delay=".6s">作为国家自主创新示范区常青藤创业园所在地，博看文思<br>用成熟的产品策划、构架、开发、上线等流程，鼓励大学<br>生自主创业，博看提供创业初期最缺乏的项目(不低于<br>5000美金)，博看文思与创业团队全方位合作，共同研<br>发、推广产品。</p>
            <img src="img/arrow.png" alt="" class="top">
        </div>
        <!-- 9 -->
        <div class="swiper-slide b5">
            <img src="img/8-1.png" alt="" class="ani img9" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".2s" swiper-animate-delay=".2s">
            <img src="img/81.png" alt="" class="ani img10 t1" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".3s" swiper-animate-delay=".8s">
            <img src="img/82.png" alt="" class="ani img11 t1" swiper-animate-effect="fadeInRight" swiper-animate-duration=".3s" swiper-animate-delay="1.1s">
            <img src="img/83.png" alt="" class="ani img12 t1" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".3s" swiper-animate-delay="1.4s">
            <img src="img/84.png" alt="" class="ani img13 t1" swiper-animate-effect="fadeInRight" swiper-animate-duration=".3s" swiper-animate-delay="1.7s">
            <img src="img/85.png" alt="" class="ani img14 t1" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".3s" swiper-animate-delay="2s">
            <img src="img/86.png" alt="" class="ani img15 t1" swiper-animate-effect="fadeInRight" swiper-animate-duration=".3s" swiper-animate-delay="2.3s">
            <img src="img/1-3.png" alt=""  class="ani  img3" swiper-animate-effect="rotateOute" swiper-animate-duration="30s" swiper-animate-delay="3s">
            <img src="img/arrow.png" alt="" class="top">
        </div>
        <!-- 10 -->
        <div class="swiper-slide b5">
            <h1 class="ani h1" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay=".2s">合作企业</h1>
            <p class="ani p3" swiper-animate-effect="fadeInDown" swiper-animate-duration=".5s" swiper-animate-delay="1s">战略联盟与合作伙伴关系是博看文思业务持续发展的<br>重要保证，博看文思已经与行业领导者建立了战略合<br>作伙伴关系，紧密的合作伙伴关系，确保博看文思能<br>够满足客户的各种需求，并为客户提供了优秀的解决<br>方案。</p>
            <img src="img/qyhz.png" alt="" class="ani img16" swiper-animate-effect="fadeInUp" swiper-animate-duration=".3s" swiper-animate-delay="1.5s">
            <img src="img/arrow.png" alt="" class="top">
            <img src="img/1-3.png" alt=""  class="ani  img3" swiper-animate-effect="rotateOute" swiper-animate-duration="30s" swiper-animate-delay="3s">
        </div>
        <!-- 11 -->
        <div class="swiper-slide b5">
            <img src="img/10-1.png" alt="" class="ani img17" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay=".3s">
            <img src="img/101.jpg" alt="" class="ani img18 t2" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".3s" swiper-animate-delay=".3s">
            <img src="img/102.jpg" alt="" class="ani img19 t2" swiper-animate-effect="fadeInRight" swiper-animate-duration=".3s" swiper-animate-delay=".5s">
            <img src="img/103.jpg" alt="" class="ani img20 t2" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".3s" swiper-animate-delay=".7s">
            <img src="img/104.jpg" alt="" class="ani img21 t2" swiper-animate-effect="fadeInRight" swiper-animate-duration=".3s" swiper-animate-delay=".9s">
            <img src="img/105.jpg" alt="" class="ani img22 t2" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".3s" swiper-animate-delay="1.1s">
            <img src="img/106.jpg" alt="" class="ani img23 t2" swiper-animate-effect="fadeInRight" swiper-animate-duration=".3s" swiper-animate-delay="1.3s">
            <img src="img/107.jpg" alt="" class="ani img24 t2" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".3s" swiper-animate-delay="1.5s">
            <img src="img/108.jpg" alt="" class="ani img25 t2" swiper-animate-effect="fadeInRight" swiper-animate-duration=".3s" swiper-animate-delay="1.7s">
            <img src="img/arrow.png" alt="" class="top">
        </div>
        <!-- 12 -->
        <div class="swiper-slide b6">
            <img src="img/11_02.png" alt="" class="ani img26" swiper-animate-effect="flipInX" swiper-animate-duration=".2s" swiper-animate-delay=".2s">
            <img src="img/11_03.png" alt="" class="ani img27" swiper-animate-effect="flipInX" swiper-animate-duration=".2s" swiper-animate-delay=".4s">
            <img src="img/11_04.png" alt="" class="ani img28" swiper-animate-effect="flipInX" swiper-animate-duration=".2s" swiper-animate-delay=".6s">
            <img src="img/11_05.png" alt="" class="ani img29" swiper-animate-effect="flipInX" swiper-animate-duration=".2s" swiper-animate-delay=".8s">
            <img src="img/11_06.png" alt="" class="ani img30" swiper-animate-effect="flipInX" swiper-animate-duration=".2s" swiper-animate-delay="1s">
            <img src="img/11_07.png" alt="" class="ani img31" swiper-animate-effect="flipInX" swiper-animate-duration=".2s" swiper-animate-delay="1.2s">
            <img src="img/11_08.png" alt="" class="ani img32" swiper-animate-effect="flipInX" swiper-animate-duration=".2s" swiper-animate-delay="1.4s">
            <img src="img/11_09.png" alt="" class="ani img33" swiper-animate-effect="flipInX" swiper-animate-duration=".2s" swiper-animate-delay="1.6s">
            <img src="img/11_10.png" alt="" class="ani img34" swiper-animate-effect="flipInX" swiper-animate-duration=".2s" swiper-animate-delay="1.8s">
            <img src="img/arrow.png" alt="" class="top">
        </div>
        <!-- 13 -->
        <div class="swiper-slide b5">
            <img src="img/p12t.png" alt="" class="ani img35" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay=".2s">
            <h1 class="ani h3" swiper-animate-effect="zoomIn" swiper-animate-duration=".8s" swiper-animate-delay="1s">电话：4006-333-186</h1>
            <h1 class="ani h4" swiper-animate-effect="zoomIn" swiper-animate-duration=".8s" swiper-animate-delay="1s">地址：北京石景山区总工会二层</h1>
            <span class="ani" swiper-animate-effect="fadeInDownBig" swiper-animate-duration=".5s" swiper-animate-delay="1.6s">长按二维码，对话博看文思</span>
            <img src="img/p12e.jpg" alt="" class="ani img36" swiper-animate-effect="fadeInDownBig" swiper-animate-duration=".5s" swiper-animate-delay="1.9s">
            <img src="img/arrow.png" alt="" class="top">
        </div>
        
    </div>
  </div>
  <!-- Swiper JS -->
  <script src="jquery.js"></script>
  <script src="swiper.min.js"></script>
  <script src="swiper.animate.min.js"></script>
  
  <!-- Initialize Swiper -->
  <script> 
      (function (doc, win) {
        resetPage = function () {
            var deviceWidth = doc.documentElement.clientWidth;
            var scale = deviceWidth / 640;
            if (deviceWidth >= 640) {
                doc.documentElement.style.fontSize = '65px';
            } else {
                doc.documentElement.style.fontSize = scale * 100 + 'px';
            }
        }
        if (!doc.addEventListener) {
            return;
        }
        doc.addEventListener('DOMContentLoaded', resetPage, false);
        win.addEventListener('resize', resetPage, false);
    })(document, window)

    // var swiper = new Swiper('.swiper-container', {
     
    // });
 

    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical',
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        on:{
        init: function(){
            swiperAnimateCache(this); //隐藏动画元素 
            swiperAnimate(this); //初始化完成开始动画
        }, 
        slideChangeTransitionEnd: function(){ 
            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
           //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展现一次，去除ani类名
        } 
        }
    });
   

  </script>
  
</body>
</html>
